<template>
  <p>sojdfdsif</p>
  <button class="btn" @click="open">打开水印</button>
  <button class="btn" @click="cloase">关闭水印</button>
  <button class="save btn" @click="save">应用水印</button>
  <button class="save btn" @click="theme">进入主题页面</button>
  <button class="save btn" @click="flow">工作流</button>
  <button class="save btn" @click="testRouter1">跳转到动态路由测试页面</button>
  <button class="save btn" @click="testRouter2">动态路由list页面</button>

  <div id="watermarkbox" class="box">
    {{ text }}
  </div>

  <span>sofjdsifdsjfdsi</span>
  <div>sjfisdjfisdfjsifi</div>
</template>
<script setup>
import { ref } from "vue"
import { useRouter } from "vue-router"
import { useWatermark } from "@/hooks/useWatermark"
import { useWatermarkStore } from "@/store/useWatermarkStore"

const text = ref("无水印")
const { watermark } = useWatermark()

// 打开水印
const open = () => {
  // destoryWatermark();
  text.value = "有水印"
  watermark.set({
    container: "watermarkbox",
  })
  useWatermarkStore().setWatermarkStatus(true)
}

//关闭水印，改状态  改DOM元素
const cloase = () => {
  text.value = "无水印"
  // hideWatermark();
  useWatermarkStore().setWatermarkStatus(false)
}

// 真实应用水印，  根据状态
const save = () => {
  if (useWatermarkStore().isShow) {
    //必须销毁之前创建的实例对象
    watermark.destory()
    watermark.set({
      container: document.body,
    })
  } else {
    watermark.destory()
  }
}

// ajax 接口
// setTimeout(() => {
//   // ajax  true -> 有水印   false -> 没有水印
//   text.value = "有水印";
//   watermark.set();
//   useWatermarkStore().setWatermarkStatus(true);
// }, 1000 * 4);

let router = useRouter()
const theme = () => {
  router.push("/theme")
}

const flow = () => {
  router.push("/XTModuleWorkflowEditor")
}

const testRouter1 = () => {
  console.log("routes ...", router.getRoutes())
  router.push("/routerText")
}

const testRouter2 = () => {
  console.log("routes ...", router.getRoutes())
  router.push("/list")
}
</script>
<style>
.btn {
  margin: 10px 10px;
  width: 180px;
  height: 50px;
  background-color: inherit;
}

.box {
  margin-top: 100px;
  width: 1000px;
  height: 400px;
  border: 2px solid red;
  text-align: center;
}
</style>
